---
description: Learn how to configure an Area chart
---

import CodeBlock from "@theme/CodeBlock"
import { PropsTable } from "@site/src/components/PropsTable"
import { generateDataRecords } from "../utils/data"
import { XYWrapper, XYWrapperWithInput } from '../wrappers/xy-wrapper'

export const areaProps = (n=10) => ({
  name: "Area",
  data: generateDataRecords(n),
  x: d=>d.x,
  y: d=>d.y
});

## Basic Configuration
<XYWrapper {...areaProps()} showContext="full"/>

## Curve Types
Using the `curveType: CurveType` property you can set various curve type options. For example:
<XYWrapperWithInput {...areaProps(25)} inputType="select" options={["basis", "linear", "step"]} defaultValue="basis" property="curveType"/>

Learn more about configurable curves from D3's [documentation](https://github.com/d3/d3-shape#curves)

## Color
Setting color for a single _Area_ component is simple, you can achieve that just by setting the `color` property of the component to a hex string.

<XYWrapperWithInput {...areaProps(50)} property="color" inputType="color" defaultValue="#19cb9a"/>

## Stacked Areas
### Y Accessors
_Area_ can accept an array of `y` accessors to display stacked areas from your provided data.

 
**Note**: It is important that an array of accessors or provided, not a single accessor which returns
an array. For example, if you wanted to generate a chart with three areas of random data:

<XYWrapper excludeTabs {...areaProps()} y={Array(3).fill(Math.random)}/>


```ts
/* ✅ Do this */
const y = [
  () => Math.random(),
  () => Math.random(),
  () => Math.random(),
]

/* ⛔ Not this */
const y = d => [Math.random(), Math.random(), Math.random()]
```

### Multiple Colors
If you want to configure multiple colors for your _Area_ component, you'll have to supply a single
accessor. A common configuration is to utilize the data's index:

<XYWrapper {...areaProps()} showContext="full" y={[(d) => d.y, (d) => d.y1, (d) => d.y2]} color={(d, i) => ['red', 'green', 'blue'][i]}/>

## Dealing with small values
If your data has small or zero values leading to some parts of the area to become invisible, you can use the `minHeight` property to set a minimum height for the area. This can be useful if you want to visually emphasize that the data behind the chart is defined but just very small.

<XYWrapperWithInput {...areaProps()}  y={[(d) => d.y < 9 ? 0 : d.y]} property="minHeight" inputType="number" defaultValue={1} showAxes/>

### Stacking minimum heights
When working with stacked areas and using the `minHeight` property, you can control whether the minimum height adjustments stack on top of each other or not using the `stackMinHeight` property.

By default, each area with a minimum height will be adjusted independently. When you set `stackMinHeight` to `true`, the minimum height adjustments will be cumulative, which can affect the visual appearance of stacked areas with small values.

> **Note:** Use the `minHeight` and `stackMinHeight` properties carefully as they modify the visual representation of the data without changing the underlying values.
The Crosshair component will still show circles at the original data values, not at the visually extended area height.

<XYWrapperWithInput 
  {...areaProps()} 
  y={[(d) => d.y < 9 ? 0.0001 : d.y, (d) => d.y1 < 5 ? 0.0001 : d.y1, (d) => d.y2 < 7 ? 0.0001 : d.y2]} 
  property="stackMinHeight" 
  inputType="checkbox" 
  defaultValue={false} 
  minHeight={5}
  containerProps={{padding: {top: 10}}}
  showAxes
/>

## Events

The _Area_ component supports the following events:
```ts
import { Area } from '@unovis/ts'

events = [Area.selectors.area]: {
  click: (data: DataRecord[]) => {},
  mouseover: (data: DataRecord[]) => {},
  mouseleave: (data: DataRecord[]) => {}
}
```
<XYWrapper {...areaProps()} excludeGraph events={{}}/>

## CSS Variables
The _Area_ component supports additional styling via CSS variables that you can define for your visualization container. For example:

```css title="styles.css"
.custom-area {
  --vis-area-fill-opacity: 0.5;
  --vis-area-hover-fill-opacity: 1;
  --vis-area-stroke-width: 1px;
```
<XYWrapper excludeTabs {...areaProps()} y={[(d) => d.y, (d) => d.y1, (d) => d.y2]} className="custom-area"/>

<details open>
  <summary>Supported CSS variables and their default values</summary>
  <CodeBlock language="css">
    {`--vis-area-cursor: default;
--vis-area-fill-opacity: 1;
--vis-area-stroke-color: none;
--vis-area-stroke-width: 0px;
--vis-area-stroke-dasharray: none;
--vis-area-stroke-opacity: 1;
--vis-area-hover-fill-opacity: none;
--vis-area-hover-stroke-width: none;
 
/* Dark Theme */
--vis-dark-area-stroke-color: none;`}
  </CodeBlock>
</details>

## Component Props
<PropsTable name="VisArea"></PropsTable>
